<template>
  <div id="appraise">
    <!--    头订单明细-->
    <div id="NoHead">
      <van-icon name="arrow-left" size="30" @click="toOrderList"/>
      <span>订单明细</span>
    </div>
    <!--    高得地图-->
    <div id="container">

    </div>
    <!--    订单详情-->
    <div class="NoHead1">
      <span style="font-size: 20px">支付完成，请评价此次服务</span><br>
      <span style="font-size: 10px">匿名评价，保护乘客隐私</span>
    </div>
    <!--    评价内容-->
    <div class="NoHead3">
      <van-rate
          v-model="value"
          :size="30"
          color="#4EA9CB"
          void-icon="star"
          void-color="#F1F2F1"
          gutter="20px"
          style="margin-bottom: 10px"
      />
      <van-checkbox-group v-model="result" direction="horizontal">
        <van-checkbox shape="square" name="1">车辆干净</van-checkbox>
        <van-checkbox shape="square" name="2">认路准</van-checkbox>
        <van-checkbox shape="square" name="3">驾驶平稳</van-checkbox>
        <van-checkbox shape="square" name="4">态度好</van-checkbox>
        <van-checkbox shape="square" name="5">有礼貌</van-checkbox>
        <van-checkbox shape="square" name="6">服务周到</van-checkbox>
      </van-checkbox-group>
    </div>
    <!--    尾部消息与修改评价与投诉-->
    <div class="NoHead4">
      <van-button type="default" style="width: 100px" color="#4EA9CB">消息</van-button>
      <van-button v-if="this.form.userScore==''" type="default" style="width:150px;" color="#4EA9CB"
                  @click="insertAppraise">添加评价
      </van-button>
      <van-button v-if="this.form.userScore!=''" type="default" style="width:150px;" color="#4EA9CB"
                  @click="insertAppraise">修改评价
      </van-button>
    </div>
  </div>
</template>




<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  findOrderById,
  getUserAppraise,
  insertUserAppraise,
  UpdateUserAppraise
} from "@/api/order/orderList";



export default {
  // mounted() {
  //   this.initAMap();
  // },
  unmounted() {
    this.map?.destroy();
  },
  data() {
    return {
      value: 4,
      result: [],
      //订单ID
      orderId: this.$route.query.orderId,
      //司机ID
      driverId: this.$route.query.driverId,
      //用户ID
      userId: window.localStorage.getItem('userId'),
      Order: {
        orderCost: {},
        orderInformation: {},
        orderTime: {},
      },
      //出发点经度
      startingLongitude: '',
      //出发点纬度
      startingLatitude: '',
      //目的地经度
      destinationLongitude: '',
      //目的地纬度
      destinationLatitude: '',
      //司机信息
      Driver: {
        carAttribute: {},
        driverAttribute: {},
        baseCarTypeManage: {}
      },
      //评价信息
      form: {
        id: '',
        orderId: '',
        userId: '',
        driverId: '',
        userScore: '',
        userEvaluationoptions: '',
      }
    }
  },
  created() {
    //查找某个订单信息
    findOrderById(this.orderId).then(res => {
      this.Order = res.data
      this.startingLongitude = this.Order.orderInformation.startingPoint.split(',')[0]
      this.startingLatitude = this.Order.orderInformation.startingPoint.split(',')[1]
      this.destinationLongitude = this.Order.orderInformation.destination.split(',')[0]
      this.destinationLatitude = this.Order.orderInformation.destination.split(',')[1]
      this.initAMap();
    })
    //查找订单评价信息
    getUserAppraise(this.orderId).then(res => {
      if (res.data == null) {
        console.log('未评价')
      } else {
        if (res.data.userScore == null) {
          this.form.id = res.data.id
          console.log('乘客已评价')
        } else {
          this.form = res.data
          this.value = this.form.userScore
          this.result = res.data.userEvaluationoptions.split(',')
        }
        console.log(res.data)
      }
    })
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "9708bfa416d306b9dbaf55ea4e4a25f2",
      };
      AMapLoader.load({
        key: "e6effe38515227141202b9fb6749424e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
            const map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [116.397428, 39.90923], // 初始化地图中心点位置
            });

            // 保存 Vue 实例的引用
            const vm = this;
            AMap.plugin("AMap.DragRoute", function () {
              //path 是驾车导航的起、途径和终点，最多支持16个途经点
              var path = [];
              path.push([vm.startingLongitude, vm.startingLatitude]);
              path.push([vm.destinationLongitude, vm.destinationLatitude]);
              var route = new AMap.DragRoute(map, path, 0);
              //查询导航路径并开启拖拽导航
              route.search();
            });
          })
    },
    toOrderList() {
      this.$router.push('/orderList')
    },
    //添加评价
    insertAppraise() {
      console.log(this.form)
      this.form.userId = this.userId
      this.form.orderId = this.orderId
      this.form.userScore = this.value
      this.form.userEvaluationoptions = this.result.join(',')
      if (this.form.id != null && this.form.id != '') {
        UpdateUserAppraise(this.form).then(res => {
          if (res.code == 1) {
            this.$toast('修改评论成功')
            this.$router.push('/orderList')
          }
        })
      } else {
        insertUserAppraise(this.form).then(res => {
          if (res.code == 1) {
            this.$toast('评论成功')
            this.$router.push('/orderList')
          }
        })
      }
    },
  }
}
</script>


<style>
#appraise {
  width: 100%;
  height: 900px;
  background: #F3FCFF;;
}

#NoHead {
  width: 100%;
  height: 50px;
  background: white;
}

#NoHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#NoHead span {
  font-size: 20px;
  margin-left: 30%;
  margin-top: 5px;
}

#container {
  width: 100%;
  height: 30vh;
}

.NoHead1 {
  margin-top: 10px;
  margin-left: 5%;
  width: 95%;
  height: 130px;
  line-height: 22px;
}
.NoHead3 {
  text-align: center;
  width: 100%;
  height: 170px;
}
.NoHead4 {
  width: 100%;
  height: 60px;
}
.NoHead4 .van-button {
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 20px;
}
</style>